<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色</title>
    <style>
	 
        * {
            padding: 0px;
            margin: 0px;
        }
        .main {
            width: 401px;
            height: 356px;
            margin: 100px auto;
            border: 1px solid #000;

        }
        ul {
            width: 402px;

        }
        li {
            line-height: 30px;
            list-style-type: none;
            width: 200px;
            height: 50px;
            text-align: center;
            border: 1px;
            float: left;
            border: 1px solid #000;
            margin: -1px 0px 0px -1px;
            display: block;
        }
    </style>
    <script>
        window.onload = function () {
            var m = document.getElementById("main");
            var uls = m.getElementsByTagName("ul");
            for (var i = 0; i < uls.length; i++) {
                var list = uls[i].getElementsByTagName("li");
                if (i % 2 == 0) {
                    for (var j = 0; j < list.length; j++) {
                        list[j].style.backgroundColor = "#eee";
                    }
               }
                else {
                    for (var j = 0; j < list.length; j++) {
                        list[j].style.backgroundColor = "#ddd";
                    }
               }
                uls[i].onmouseover = function () {
                    var list = this.getElementsByTagName("li");
                    for (var j = 0; j < list.length; j++) {
                        list[j].style.backgroundColor = "skyblue";
                    }
                }

                uls[i].onmouseout=function(){
                    window.onload();
                }
            }
        }
    </script>
</head>

<body>
<div class="main" id="main">
    <ul>
        <li>姓名</li>

        <li>李林林</li>
    </ul>
    <ul>
        <li>班级</li>
        <li>软件15级</li>
    </ul>
    <ul>
        <li>学号</li>
        <li> 201506050315</li>
    </ul>
    <ul>
        <li>性别</li>
        <li>女</li>
    </ul>
    <ul>

        <li>专业</li>
        <li> 软件工程</li>
    </ul>
    <ul>
        <li>学院</li>
        <li>电子与信息工程学院</li>
    </ul>

    <ul>
        <li>学校</li>
        <li>湖南科技学院</li>
    </ul>
</div>
</body>
</html>